import React, { Component } from "react";
import { Modal } from "antd";
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import TheTableExtend from "@/components/TheTableExtend"
export default class Sensor extends Component {
  constructor() {
    super()
    this.state = {
      columns: [
        {
          title: '传感器名称',
          dataIndex: "name",
          key: "name",
        },
        {
          title: '配置信息A',
          dataIndex: "name",
          key: "name",
        },
        {
          title: '配置信息B',
          dataIndex: "name",
          key: "name",
        },
        {
          title: '操作',
          render: (text, record) => {
            return (
              <>
                <TheButton onClick={() => this.edit(record)}>编辑</TheButton>
                <TheButton >删除</TheButton>
              </>
            )
          }
        },
      ],
      dataSource: [{
        id: 1,
        phone: '111',
        name: 'aaa'
      }],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: '',
      isModalVisible: false,
      title: '',
    }
  }
  // componentDidMount() {

  // }
  // 编辑删除
  edit = () => {
    this.setState({
      isModalVisible: true,
      title: '编辑'
    })
  }
  handleOk = () => {
    this.setState({
      isModalVisible: false,
      title: '编辑'
    })
  }
  handleCancel = () => {
    this.setState({
      isModalVisible: false,
      title: '编辑'
    })
  }
  render() {
    const { columns, dataSource, pageData, total, title, isModalVisible } = this.state
    return (
      <>
        <div className="p-layout-box">
          <TheTableExtend
            columns={columns}
            onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
            onTableRefresh={() => this.onTableRefresh()}
            onColumnsFilter={(value) => { this.onColumnsFilter(value) }}
          >
            <TheButton size="middle" type="primary">新建传感器</TheButton>
          </TheTableExtend>

          {/* <div className="p-layout-content-pagination"> */}
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination pageNo={pageData.pageNo} pageSize={pageData.pageSize} total={total} pageChange={this.pageChange} />
          {/* </div> */}
        </div>
        <Modal
          title={title}
          width='30%'
          visible={isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}>

        </Modal>
      </>
    )
  }
}